<template>
  <view class="container">
    <button v-if="userInfo.nickName == null" @click="getUserProfile">登录</button>
    <view wx:else class="user-container">
      <view class="user-background">
        <image src="/static/images/bg.jpg" mode="widthFix" />
      </view>
      <view class="userinfo-box">
        <view class="user-avatar">
          <image :src="userInfo.avatarUrl" mode="widthFix" />
        </view>
        <view class="userinfo">
          <view class="username">{{ userInfo.nickName }}</view>
        </view>
      </view>
      <view class="options">
        <view class="list-box">
          <view class="list">
            <view class="list-icon iconfont icon-user"></view>
            <view class="list-title">用户信息</view>
          </view>
        </view>
        <view class="list-box">
          <navigator url="/pages/my/targetDetail/targetDetail">
            <view class="list">
              <view class="list-icon iconfont icon-target"></view>
              <view class="list-title"> 目标详情 </view>
            </view>
          </navigator>
        </view>
        <view class="list-box">
          <view class="list" bindtap="showUnFinish">
            <view class="list-icon iconfont icon-theme-palette"></view>
            <view class="list-title">主题设置</view>
          </view>
        </view>
        <view class="list-box" bindtap="showUnFinish">
          <view class="list">
            <view class="list-icon iconfont icon-about"></view>
            <view class="list-title">关于</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      userInfo: null,
      hasUserInfo: false,
    };
  },

  components: {},

  mounted() {
    const userInfo = wx.getStorageSync('userInfo');
    console.log(userInfo)
    if(userInfo != null){
      this.userInfo = userInfo
    }     
  },

  methods: {
    getUserProfile(e) {
      // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          this.userInfo = res.userInfo;
          this.hasUserInfo = true;
          console.log(res.userInfo)
          // wx.setStorageSync("userInfo", this.userInfo);
        },
      });
    },
  },
};
</script>

<style scoped>
/* pages/my/my.wxss */
page {
  background: rgb(242, 242, 242);
}

.user-background {
  width: 750rpx;
}
.user-background image {
  width: 100%;
}

.userinfo-box {
  display: flex;
  margin: 0 60rpx;
  position: relative;
  top: -130rpx;
}
.user-avatar {
  flex: 3;
}
.user-avatar image {
  width: 100%;
  border-radius: 50%;
  box-shadow: 3px 3px 6px #666;
}
.userinfo {
  flex: 7;
  color: white;
  display: flex;
  align-items: center;
  margin-left: 40rpx;
}
.username {
  font-size: 40rpx;
}
.options {
  margin: 0 60rpx;
  position: relative;
  top: -80rpx;
}

.list-box {
  border-radius: 20rpx;
  height: 120rpx;
  margin-bottom: 40rpx;
  background: #fff;
}
.list {
  display: flex;
  line-height: 120rpx;
}
.list-icon {
  margin-left: 40rpx;
}
.list-title {
  margin-left: 40rpx;
}
</style>